<!--  -->
<template>
  <div class="box">
    <chart>
      <tr v-for="item in brief" :key="item.id">
        <td>{{ item.trade_date }}</td>
        <td>{{ item.zb }}</td>
        <td>{{ item.gs_count }}</td>
        <td>{{ item.pledge_count }}</td>
        <td>{{ item.bballowance }}</td>
        <td>{{ item.zysz }}万亿</td>
        <td>{{ item.zs }}</td>
        <td :class="item.color">{{ item.chg }}%</td>
      </tr>
    </chart>

    <p class="lookMore">
      <router-link :to="`situationPage`" class="txt"
        >查看全部数据>>
      </router-link>
    </p>
    <div class="border">
      <div class="head">
        <span class="title">上市公司质押比例</span>
      </div>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>股票代码</td>
            <td>股票简称</td>
            <td>交易日期</td>
            <td>质押比例(%)</td>
            <td>质押股数(股)</td>
            <td>质押市值(元)</td>
            <td>质押笔数</td>
            <td>无限售股<br />质押数(股)</td>
            <td>限售股质<br />押数(股)</td>
            <td>近一年涨<br />跌幅(%)</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in rate" :key="item.id">
            <td>{{ i + 1 }}</td>
            <td>{{ item.scode }}</td>
            <td>{{ item.sname }}</td>
            <td>{{ item.trade_date }}</td>
            <td>{{ item.amtshareratio }}</td>
            <td>{{ item.bballowance }}</td>
            <td>{{ item.zysz }}</td>
            <td>{{ item.amtsharenum }}</td>
            <td>{{ item.bbyallowance }}</td>
            <td>{{ item.bbwallowance }}</td>
            <td :class="item.color">{{ item.zdf }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p class="lookMore">
      <router-link :to="`ratePage`" class="txt">查看全部数据>> </router-link>
    </p>
    <div class="border">
      <div class="head">
        <span class="title">重要股东股权质押情况</span>
      </div>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>股票代码</td>
            <td>股票简称</td>
            <td width="170">股东名称</td>
            <td>质押股份<br />数量(股)</td>
            <td>占所持股<br />份比例(%)</td>
            <td>占总股本<br />比例(%)</td>
            <td width="170">质押机构</td>
            <td>最新价(元)</td>
            <td>质押日<br />收盘价(元)</td>
            <td>预估平<br />仓线(元)</td>
            <td>质押<br />开始日期</td>
            <td>公告日期</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in holder" :key="item.id">
            <td>{{ i + 1 }}</td>
            <td>{{ item.scode }}</td>
            <td>{{ item.sname }}</td>
            <td>{{ item.gdmc }}</td>
            <td>{{ item.sharefrozennum }}</td>
            <td>{{ item.frozenratio }}</td>
            <td>{{ item.frozenintotal }}</td>
            <td>{{ item.jgmc }}</td>
            <td>{{ item.latest_price }}</td>
            <td>{{ item.spj }}</td>
            <td>{{ item.pcx }}</td>
            <td>{{ item.sdate }}</td>
            <td>{{ item.ndate }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p class="lookMore">
      <router-link :to="`holderPage`" class="txt">查看全部数据>> </router-link>
    </p>
    <div class="border">
      <div class="head">
        <div class="type clear">
          <span
            class="item fl"
            :class="{ cur: params.type == '券商信托' }"
            @click="changeData('broker')"
            >证券公司</span
          >
          <span
            class="item fl"
            :class="{ cur: params.type == '银行' }"
            @click="changeData('bank')"
            >银行</span
          >
        </div>
        <span class="title">股权质押分布统计</span>
      </div>
      <div class="head sub-head">
        <span class="title"
          >质押方为{{ type == "bank" ? "银行" : "证券公司" }}的分布统计</span
        >
      </div>
      <div class="tag">
        <span
          :class="{ active: params.field == 'pledge_count' }"
          @click="params.field = 'pledge_count'"
          ><i class="icon"></i
          ><span class="pillar color1"></span>质押方总笔数</span
        >
        <span
          :class="{ active: params.field == 'zy_sum' }"
          @click="params.field = 'zy_sum'"
          ><i class="icon"></i
          ><span class="pillar color2"></span>质押股份数量</span
        >
        <span
          :class="{ active: params.field == 'scode_count' }"
          @click="params.field = 'scode_count'"
          ><i class="icon"></i
          ><span class="pillar color3"></span>质押公司数量</span
        >
      </div>
      <div ref="chart" style="height: 205px"></div>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>质押机构</td>
            <td>质押公司数量</td>
            <td>质押笔数</td>
            <td>质押数量(股)</td>
            <td>未达预警线比例(%)</td>
            <td>达到预警线未达<br />平仓线比例(%)</td>
            <td>达到平仓线比例(%)</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in tableData.slice(0, 5)" :key="item.id">
            <td>{{ i + 1 }}</td>
            <td>{{ item.sname }}</td>
            <td>{{ item.scode_count }}</td>
            <td>{{ item.pledge_count }}</td>
            <td>{{ item.zy_sum_str }}</td>
            <td>{{ item.under_warn_rate }}</td>
            <td>{{ item.over_warn_rate }}</td>
            <td>{{ item.pcx_rate }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p class="lookMore">
      <router-link :to="`organizationPage/${type}`" class="txt"
        >查看全部数据>>
      </router-link>
    </p>
  </div>
</template>

<script>
import chart from "../components/chart";

import { getList, organization } from "../api/index";
import { numberFormat } from "../script/utils";
import drawBar from "../script/drawBar2";
export default {
  data() {
    return {
      brief: [],
      holder: [],
      rate: [],
      tableData: [],
      chartData: [],
      keys: {
        bank: "银行",
        broker: "券商信托",
      },
      key: "pledge_count",
      type: "broker",
      params: {
        type: "券商信托",
        field: "pledge_count",
        sort: "desc",
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    "params.field"() {
      this.organization();
    },
  },
  components: { chart },

  computed: {},

  mounted() {
    this.getList();
    this.changeData();
  },

  methods: {
    async getList() {
      await getList().then((back) => {
        if (back.status == 1) {
          let brief = back.data.brief;
          let holder = back.data.holder;
          let rate = back.data.rate;
          this.brief = brief.map((item) => ({
            trade_date: item.trade_date,
            zb: numberFormat(item.zb / 100),
            gs_count: numberFormat(item.gs_count),
            pledge_count: numberFormat(item.pledge_count),
            bballowance: numberFormat(item.bballowance*10000),
            zysz: numberFormat(item.zysz),
            zs: numberFormat(item.zs),
            chg: numberFormat(item.chg),
            color: {
              green: item.chg < 0,
              red: item.chg > 0,
            },
          }));
          this.holder = holder.map((item) => ({
            scode: item.scode,
            sname: item.sname,
            gdmc: item.gdmc,
            sharefrozennum: numberFormat(item.sharefrozennum),
            frozenratio: numberFormat(item.frozenratio),
            frozenintotal: numberFormat(item.frozenintotal),
            jgmc: item.jgmc,
            latest_price: numberFormat(item.latest_price),
            spj: numberFormat(item.spj),
            pcx: numberFormat(item.pcx),
            sdate: item.sdate,
            ndate: item.ndate,
          }));
          this.rate = rate.map((item) => ({
            scode: item.scode,
            sname: item.sname,
            trade_date: item.trade_date,
            amtshareratio: numberFormat(item.amtshareratio),
            bballowance: numberFormat(item.bballowance),
            zysz: numberFormat(item.zysz),
            amtsharenum: numberFormat(item.amtsharenum),
            bbyallowance: numberFormat(item.bbyallowance*10000),
            bbwallowance: numberFormat(item.bbwallowance*10000),
            zdf: numberFormat(item.zdf),
            color: {
              green: item.zdf < 0,
              red: item.zdf > 0,
            },
          }));
        }
      });
    },
    async changeData(type = "broker") {
      this.type = type;
      let multiple = 100;
      this.params.type = this.keys[type];
      await organization({
        ...this.params,
        field: "scode_count",
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.tableData = data.map((item) => ({
            sname: item.sname,
            scode_count: item.scode_count,
            pledge_count: item.pledge_count,
            zy_sum: item.zy_sum,
            zy_sum_str: numberFormat(item.zy_sum),
            under_warn_rate: Number(item.under_warn_rate*multiple).toFixed(2),
            over_warn_rate:  Number(item.over_warn_rate*multiple).toFixed(2),
            pcx_rate: Number(item.pcx_rate*multiple).toFixed(2),
          }));
          this.organization();
        }
      });
    },
    async organization() {
        let multiple = 100;
      await organization(this.params).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.chartData = data.map((item) => ({
            sname: item.sname,
            scode_count: item.scode_count,
            pledge_count: item.pledge_count,
            zy_sum: item.zy_sum,
            zy_sum_str: numberFormat(item.zy_sum),
            under_warn_rate:Number(item.under_warn_rate*multiple).toFixed(2),
            over_warn_rate: Number(item.over_warn_rate*multiple).toFixed(2),
            pcx_rate: Number(item.pcx_rate*multiple).toFixed(2),
          }));
          this.drawBar();
        }
      });
    },
    drawBar() {
      drawBar({
        container: this.$refs.chart,
        data: this.chartData,
        type: this.type,
        key: this.params.field,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";
.mt40 {
  margin-top: 40px;
}
.border {
  border: 1px solid $border;
  border-radius: 6px;
}
.box {
  background: $bg;
  .head {
    background: $border;
    line-height: 34px;
    text-align: center;
    position: relative;
    .type {
      position: absolute;
      left: 0;
      top: 0;
      padding-left: 4px;
      padding-top: 5px;
      .item {
        height: 24px;
        line-height: 24px;
        color: #cccccc;
        font-size: 16px;
        padding: 0 8px;
        cursor: pointer;
        position: relative;
        &.cur {
          color: #ffffff;
          margin: 0 10px;
          background: #35497c;
          border-radius: 4px;
        }
      }
    }
    &.sub-head {
      border: 1px solid $bg;
      .title {
        font-size: 16px;
        color: #e6e6e6;
      }
    }
    .title {
      font-size: 18px;
      color: #ff4e39;
      font-weight: 400;
    }
  }
  .tag {
    padding-left: 47px;
    span {
      display: inline-block;
      margin-right: 30px;
      cursor: pointer;
      //   height: 27px;
      font-size: 12px;
      color: #999999;
      line-height: 45px;
      .pillar {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 5px;
      }
      .icon {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #999999;
        position: relative;
        top: 3px;
        margin-right: 6px;
      }
      .color1 {
        background: #2c6bd4;
      }
      .color2 {
        background: #2cb2d4;
      }
      .color3 {
        background: #7d68f2;
      }
      &.active {
        color: #e6e6e6;
        .icon {
          border: 1px solid #ff4e39;
          position: relative;
          text-align: center;
          top: 15px;
          &::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: relative;
            top: -17px;
            background: #ff4e39;
          }
        }
      }
    }
  }
  table {
    width: 100%;
    color: #bcbfc4;
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    // table-layout: fixed;
    td {
      padding: 6px 0;
    }
    thead {
      background: #1c1d21;
      td {
        border: 1px solid #323337;
      }
    }
    tbody {
      td {
        border: 1px solid #25262a;
        &.red {
          color: #ea2827;
        }
        &.green {
          color: #31ed24;
        }
      }
      tr:nth-of-type(2n) {
        background: #111117;
      }
    }
  }
  .lookMore {
    text-align: right;
    line-height: 36px;
    font-size: 16px;
    color: #e6e6e6;
    margin-bottom: 4px;
    .txt {
      cursor: pointer;
      &:hover {
        color: #ff4e39;
      }
    }
  }
}
</style>
